<template>
  <!-- Backgrounds -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Loding font -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,700"
        rel="stylesheet">

  <div id="login-bg"
       class="container-fluid">

    <div class="bg-img"></div>
    <div class="bg-color"></div>
  </div>
  <!-- End Backgrounds -->

  <div class="container"
       id="login">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="login"
             v-if="isLogin">

          <h1>登录</h1>

          <!-- Loging form -->
          <form>
            <div class="form-group">
              <input type="text"
                     v-model="loginForm.username"
                     class="form-control"
                     id="exampleInputEmail1"
                     aria-describedby="emailHelp"
                     placeholder="输入用户名">

            </div>
            <div class="form-group">
              <input type="password"
                     v-model="loginForm.password"
                     class="form-control"
                     id="exampleInputPassword1"
                     placeholder="输入密码">
            </div>

            <div class="form-check">
              <label class="switch">
                <input type="checkbox">
                <span class="slider round"></span>
              </label>
              <label class="form-check-label"
                     for="exampleCheck1">记住我</label>

              <label class="forgot-password"><a href="#">忘记密码?</a></label>
              <label class="forgot-password"><a href="#"
                   v-on:click="isRegister">注册用户</a></label>
            </div>

            <br>
            <button type="submit"
                    v-on:click="login"
                    class="btn btn-lg btn-block btn-success">登录</button>
          </form>
          <!-- End Loging form -->

        </div>

        <div class="register"
             v-if="!isLogin">
          <h1>注册</h1>
          <el-form :model="registerFrom"
                   label-width="120px"
                   class="registerFrom">
            <el-form-item label="用户名">
              <el-input v-model="registerFrom.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="registerFrom.userPassword"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="registerFrom.userPhone"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="registerFrom.userAddress"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="registerFrom.userSex"
                         placeholder="请选择你的性别">
                <el-option label="男"
                           value="0"></el-option>
                <el-option label="女"
                           value="1"></el-option>
              </el-select>
            </el-form-item>

          </el-form>
          <div class="form-check">
            <label class="forgot-password"><a href="#"
                 v-on:click="isRegister">登录</a></label>
          </div>
          <br>
          <button type="submit"
                  v-on:click="register"
                  class="btn btn-lg btn-block btn-success">注册</button>

          <!-- End Loging form -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../css/bootstrap.min.css'
import { ElLoading, ElMessage } from 'element-plus'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      registerFrom: {
        userName: '',
        userPassword: '',
        userPhone: '',
        userAddress: '',
        userSex: '',
      },
      responseResult: [],
      isLogin: true,
    }
  },
  methods: {
    login() {
      var _this = this
      console.log(this.$store.state)
      if (!this.loginForm.username) {
        ElMessage({
          message: '用户名为空',
          type: 'error',
        })
      } else if (!this.loginForm.password) {
        ElMessage({
          message: '密码为空',
          type: 'error',
        })
      } else {
        // 登录操作
        this.$http
          .post('/login', {
            userName: this.loginForm.username,
            userPassword: this.loginForm.password,
          })
          .then((successResponse) => {
            console.log(successResponse.data.code)
            if (successResponse.data.code === 200) {
              _this.$store.commit('login', _this.loginForm)
              var path = this.$route.query.redirect
              // 成功后路由跳转
              this.$router.replace({
                path: path === '/home' || path === undefined ? '/' : path,
              })
            } else if (successResponse.data.code === 400) {
              ElMessage({
                message: '用户名或密码错误',
                type: 'error',
              })
            }
          })
          .catch((failResponse) => {})
      }
    },
    register() {
      var _this = this
      console.log(this.registerFrom.userName.userSex)
      this.$http
        .post('/suser/register', {
          userName: this.registerFrom.userName,
          userPassword: this.registerFrom.userPassword,
          userPhone: this.registerFrom.userPhone,
          userAdderss: this.registerFrom.userAddress,
          userSex: this.registerFrom.userSex,
        })
        .then((successResponse) => {
          console.log(successResponse.data.userId)
          if (successResponse.data.userId == -1) {
            ElMessage({
              message: '用户名已存在',
              type: 'error',
            })
          } else {
            this.isRegister()
            ElMessage({
              message: '注册成功',
              type: 'success',
            })
          }
        })
    },
    isRegister() {
      this.isLogin = !this.isLogin
      console.log(this.isLogin)
    },
  },
}
</script>

<style>
body {
  font-family: 'Montserrat', sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#login-bg.container-fluid {
  padding: 0;
  height: 100%;
  position: absolute;
}

/* Background image an color divs*/

.bg-img,
.bg-color {
  min-width: 50%;
  vertical-align: top;
  padding: 0;
  margin-left: 0;
  height: 100%;
  background-color: rgb(235, 197, 198);
  display: inline-block;
  overflow: hidden;
}

.bg-color {
  margin-left: -5px;
}

.bg-img {
  background-image: url(../css/4-max.74253a1.jpg);
  background-size: cover;
}

#login {
  padding-top: 10%;
  text-align: center;
  text-transform: uppercase;
}
.register {
  width: 100%;
  height: 750px;
  background-color: #fff;
  padding: 15px;
  padding-top: 30px;
}
.login {
  width: 100%;
  height: 500px;
  background-color: #fff;
  padding: 15px;
  padding-top: 30px;
}
.register h1 {
  margin-top: 30px;
  font-weight: bold;
  font-size: 60px;
  letter-spacing: 3px;
}
.login h1 {
  margin-top: 30px;
  font-weight: bold;
  font-size: 60px;
  letter-spacing: 3px;
}

.login form {
  max-width: 420px;
  margin: 50px auto;
}
.el-form-item {
  width: 80%;
  font-size: 24px;
  font-weight: lighter;
  border: none;
  background-color: #f0f0f0;
  padding: 16px 15px;
  border-radius: 50px;
  transition: 0.2s;
  margin: 20px auto;
}
.el-input {
  background-color: transparent;
}
.register .btn {
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 20px;
  padding: 14px;
  background-color: #df6ea6;
}
.login .btn {
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 20px;
  padding: 14px;
  background-color: #df6ea6;
}

.form-group input {
  font-size: 20px;
  font-weight: lighter;
  border: none;
  background-color: #f0f0f0;
  color: #707070 !important;
  padding: 26px 30px;
  border-radius: 50px;
  transition: 0.2s;
}

/* Form check styles*/

.form-check {
  padding: 0;
  text-align: left;
}

.form-check label {
  vertical-align: top;
  padding-top: 5px;
  padding-left: 5px;
  font-size: 15px;
  color: #606060;
  font-size: 14px;
}

.forgot-password {
  text-align: right;
  float: right;
  font-weight: bold;
}

.forgot-password a {
  color: rgb(235, 197, 198);
  opacity: 0.6;
}

.forgot-password a:hover {
  opacity: 1;
}

/* Switch styles */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

/* Hide default HTML checkbox */
.switch input {
  display: none;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f0f0f0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: '';
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: rgb(235, 197, 198);
}

input:focus + .slider {
  box-shadow: 0 0 1px rgb(235, 197, 198);
}

input:checked + .slider:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

/* Media queries */

@media (max-width: 500px) {
  .bg-img,
  .bg-color {
    min-width: 100%;
    height: 50%;
    margin: 0;
  }

  .forgot-password {
    text-align: right;
    float: left;
    padding: 20px 0;
  }

  #login {
    padding-top: 50px;
  }
}
</style>

